.pm_toggle {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    position: relative;

    &.small {
        transform: scale(.8);
    }

    &.tiny {
        transform: scale(.5);
    }

    &.small,
    &.tiny {
        transform-origin: left center;
    }

    &.disabled {
        pointer-events: none;
        opacity: .8;
    }
}

.pm_toggle-checkbox {
    opacity: 0;
    position: absolute;
}

.pm_toggle-label {
    background-color: $gray-light;
    cursor: pointer;
    display: inline-block;
    height: 2rem;
    position: relative;
    transition: background-color .12s ease-in;
    width: $toggleWidth;
    border-radius: $border-radius-large;

    &::before {
        position: absolute;
        font-family: FontAwesome;
        content: '\f00d';
        color: $white;
        left: 2.9rem;
        top: 0;
    }

    &::after {
        background-color: $white;
        border-radius: $border-radius;
        bottom: .2rem;
        content: '';
        display: block;
        left: .2rem;
        position: absolute;
        top: .2rem;
        transition: left .12s ease-in;
        width: 2rem;
    }
}

.pm_toggle-checkbox:checked+.pm_toggle-label {
    background-color: $primary;

    &::before {
        left: .7rem;
        content: '\f00c';
    }

    &::after {
        left: calc(100% - 2.2rem);
        width: 2rem;
    }
}

.pm_toggle-label:hover,
.pm_toggle-checkbox:focus+.pm_toggle-label {
    background-color: $gray;
}

.pm_toggle-checkbox:checked+.pm_toggle-label:hover,
.pm_toggle-checkbox:checked:focus+.pm_toggle-label {
    background-color: darken($primary, 10%);
}
